import React from "react";
import {PolishContainer, PolishWindow} from "@/common/Modal/style";
import PropTypes from "prop-types";
import './style.css';
import {CSSTransition} from "react-transition-group";

class PolishConfirm extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.handleInsideClick = this.handleInsideClick.bind(this);
        this.state = {
            clickMainContainer: false
        }
    }

    handleClick(e) {
        setTimeout(
            () => {
                if (!this.state.clickMainContainer) {
                    this.props.onCancel();
                }
            },
            20
        );
    }

    handleInsideClick(e) {
        this.setState({
            clickMainContainer: true
        })
        setTimeout(
            () => {
                this.setState({
                    clickMainContainer: false
                })
            },
            50
        );
    }

    render() {
        return <>
            <CSSTransition
                in={this.props.visible}
                classNames={"polish-container"}
                timeout={1000 * 0.2}
            >
                <PolishContainer className={`${this.props.visible ? 'visible' : 'hidden'}`}
                                 onClick={this.handleClick}
                                 width={window.innerWidth}
                                 height={window.innerHeight}
                >
                    <PolishWindow ref="mainContainerRef"
                                  onClick={this.handleInsideClick}
                    >
                        {
                            <>{this.props.children}</>
                        }
                    </PolishWindow>
                </PolishContainer>
            </CSSTransition>
        </>
    }
}

PolishConfirm.propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func
}
PolishConfirm.defaultProps = {
    visible: false,
    onCancel: null
}
export default PolishConfirm;
